<template>
  <div>
    <h3>表格组件的使用</h3>
    <el-table :data="users">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
    </el-table>

    <h4>表格组件之属性使用</h4>
    <el-table :data="users" border height="200" size="mini" :row-class-name="showCss">
      <el-table-column type="selection"></el-table-column><!--这行代码的作用是多选-->
      <el-table-column label="编号" prop="id" width="200px" align="center" :sort-method="sortById"
                       sortable :resizable="false" stripe></el-table-column>
      <el-table-column label="姓名" prop="name" width="200px" align="center"></el-table-column>
      <el-table-column label="年龄" prop="age" width="200px" align="center" sortable></el-table-column>
      <el-table-column label="部门" prop="dept.name" width="200px" align="center"
                       :formatter="showDept"></el-table-column>
    </el-table>

    <h4>表格组件之事件</h4>
    <el-table :data="users" border height="200" size="mini" :row-class-name="showCss" @select="selectRow">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="编号" prop="id" width="200px" align="center" :sort-method="sortById"
                       sortable :resizable="false" stripe></el-table-column>
      <el-table-column label="姓名" prop="name" width="200px" align="center"></el-table-column>
      <el-table-column label="年龄" prop="age" width="200px" align="center" sortable></el-table-column>
      <el-table-column label="部门" prop="dept.name" width="200px" align="center"
                       :formatter="showDept"></el-table-column>
    </el-table>

    <h4>表格组件之方法</h4>
    <el-button type="primary" @click="clearSelection">清空选择</el-button>
    <el-table :data="users" border height="200" size="mini" :row-class-name="showCss" @select="selectRow" ref="tableRef">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="编号" prop="id" width="200px" align="center" :sort-method="sortById"
                       sortable :resizable="false" stripe></el-table-column>
      <el-table-column label="姓名" prop="name" width="200px" align="center"></el-table-column>
      <el-table-column label="年龄" prop="age" width="200px" align="center" sortable></el-table-column>
      <el-table-column label="部门" prop="dept.name" width="200px" align="center"
                       :formatter="showDept"></el-table-column>
    </el-table>

    <h4>表格组件之定义操作列</h4>
    <el-table :data="users" border height="200" size="mini" :row-class-name="showCss" @select="selectRow">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="编号" prop="id" width="200px" align="center" :sort-method="sortById"
                       sortable :resizable="false" stripe></el-table-column>
      <el-table-column label="姓名" prop="name" width="200px" align="center"></el-table-column>
      <el-table-column label="年龄" prop="age" width="200px" align="center" sortable></el-table-column>
      <el-table-column label="部门" prop="dept.name" width="200px" align="center"
                       :formatter="showDept"></el-table-column>
      <el-table-column label="操作" width="200px">
        <template v-slot="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <h4>表格组件之自定义表头</h4>
    <el-table :data="users.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" border height="200" size="mini" :row-class-name="showCss">
      <el-table-column type="selection"></el-table-column><!--这行代码的作用是多选-->
      <el-table-column label="编号" prop="id" width="200px" align="center" :sort-method="sortById"
                       sortable :resizable="false" stripe></el-table-column>
      <el-table-column label="姓名" prop="name" width="200px" align="center"></el-table-column>
      <el-table-column label="年龄" prop="age" width="200px" align="center" sortable></el-table-column>
      <el-table-column label="部门" prop="dept.name" width="200px" align="center"
                       :formatter="showDept"></el-table-column>
      <el-table-column
        align="right" width="200px">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


  </div>
</template>
<script>
export default {
  data() {
    return {
      users: [
        {id: 1, name: "邓小平", age: "85", dept: {id: 1, name: "研发部"}},
        {id: 2, name: "江泽民", age: "88", dept: {id: 2, name: "财务部"}},
        {id: 3, name: "习近平", age: "48", dept: {id: 2, name: "外交部"}},
        {id: 4, name: "胡锦涛", age: "68", dept: {}},
      ],
      search: "",
    }
  },
  methods: {
    sortById(user1, user2) {
      return user1.id - user2.id; // 降序
    },
    showDept(row, column, cellValue, index) {
      // console.log(row);
      // console.log(column);
      // console.log(cellValue);
      // console.log(index);
      if (cellValue) {
        return cellValue
      }
      return "暂无部门";
    },
    showCss({row, rowIndex}) {
      if (rowIndex % 2 === 1) {
        return 'warning-row';
      } else {
        return 'success-row';
      }
      return '';
    },
    selectRow(selection, row) {
      console.log(selection);
      console.log(row);
    },
    clearSelection() {
      this.$refs.tableRef.clearSelection();
    },
    handleEdit(index, row) {
      console.log(index);
      console.log(row);
    },
    handleDelete(index, row) {
      console.log(index);
      console.log(row);
    },

  }
}
</script>

<!--需要注意的是: 下面的style不能加上scope, 否则会失效-->
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
